<!--
 * @Description: 巡查任务
 * @Author: Caroline
 * @Date: 2024-01-16 20:06:31
 * @LastEditTime: 2024-03-09 19:50:07
 * @LastEditors: Caroline
 * @FilePath: \Evaluation-web\src\views\task\settlement\index.vue
-->
<template>
  <div class="common-footerFixed-box">
    <!-- 1、结算单 -->
    <div class="common-info">
      <div class="common-info-title">结算单</div>
      <el-row class="common-info-content" :gutter="8" justify="space-between">
        <el-col :span="8">
          <span class="label">任务名称：</span>
          <span class="value">第一季度测评</span>
        </el-col>
        <el-col :span="8">
          <span class="label">关联项目：</span>
          <span class="value">社区测评</span>
        </el-col>
        <el-col :span="8">
          <span class="label">任务时间：</span>
          <span class="value">2023-12-01，2023-12-02，2023-12-05，2023-12-07</span>
        </el-col>
        <el-col :span="8">
          <span class="label">开票单位：</span>
          <span class="value">xxxxxxx</span>
        </el-col>
        <el-col :span="8">
          <span class="label">税号：</span>
          <span class="value">xxxxxxx</span>
        </el-col>
        <el-col :span="8">
          <span class="label">详细地址：</span>
          <span class="value">xxxxxxx</span>
        </el-col>
      </el-row>
    </div>

    <!-- 2、表格区 -->
    <el-table max-height="calc(100vh - 256px)" v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" @sort-change="state.dataListSortChangeHandle" style="width: 100%">
      <!-- 2.1、表格列 -->
      <el-table-column prop="name" label="姓名" header-align="center" align="center" min-width="90" />
      <el-table-column prop="salary" label="兼职费用" header-align="center" align="center" min-width="90">
        <template #default="{ row }"> {{ row.salary }}/{{ row.salaryUnit }} </template>
      </el-table-column>
      <el-table-column prop="name" label="绩效金额（元）" header-align="center" align="center" min-width="90" />
      <el-table-column prop="name" label="补贴金额（元）" header-align="center" align="center" min-width="90" />
      <el-table-column prop="name" label="扣除金额（元）" header-align="center" align="center" min-width="90" />
      <el-table-column prop="name" label="实际总金额（元）" header-align="center" align="center" min-width="90" />
      <el-table-column prop="name" label="报销凭证" header-align="center" align="center" min-width="90">
        <template v-slot="scope">
          <el-button type="primary" link @click="onViewReimbursementVoucher(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" header-align="center" align="center" min-width="90">
        <template #default="{ row }">
          <el-input type="textarea" v-model="row.remark" placeholder="请输入" />
        </template>
      </el-table-column>
      <el-table-column prop="feedback" label="问题反馈" header-align="center" align="center" min-width="90" />
    </el-table>
    <div class="common-footer" :class="{ collapseSidebar: store.state.collapseSidebar }">
      <el-button type="info" size="large" plain @click="onCancel">取消</el-button>
      <el-button type="primary" size="large" @click="onSettlement">结算</el-button>
    </div>

    <el-dialog v-model="isDialogShow" width="700px" title="报销凭证">
      <div v-for="(item, i) in reimbursementVoucherList" :key="i" class="voucher-item">
        <div class="date">{{ item.time }}</div>
        <el-row class="img-wrap" :gutter="12">
          <el-col :span="8" v-for="(imgItem, j) in item.imgs" :key="j">
            <img :src="imgItem" alt="" />
          </el-col>
        </el-row>
      </div>
      <template v-slot:footer>
        <el-button type="primary" @click="isDialogShow = false">返回</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from "element-plus";
import useView from "@/hooks/useView";
import { reactive, ref, toRefs } from "vue";
import baseService from "@/service/baseService";
import { useI18n } from "vue-i18n";
import { useAppStore } from "@/store";

enum TASK_STATUS {
  UN_START = 0,
  IN_PROGRESS = 1,
  FINISHED = 2
}
const store = useAppStore();
const { t } = useI18n();

const view = reactive({
  getDataListURL: "/if/daily/patrol/page",
  getDataListIsPage: true,
  deleteURL: "/if/daily/patrol",
  deleteIsBatch: true,
  dataForm: {
    id: "",
    keyword: "",
    status: ""
  }
});

const state = reactive({ ...useView(view), ...toRefs(view) });

// 查看报销凭证
const isDialogShow = ref(false);
const reimbursementVoucherList = ref<{ time: string; imgs: string[] }[]>([]);
const onViewReimbursementVoucher = async (row: any) => {
  isDialogShow.value = true;
  baseService.get("/if/application/list").then((res) => {
    reimbursementVoucherList.value = [
      {
        time: "2023-12-12",
        imgs: [
          "https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics1.baidu.com%2Ffeed%2Ff636afc379310a553bce7d6c818be5a48026109f.jpeg%40f_auto%3Ftoken%3Da2f315f75d3f196a86f4b6648e2ae40c&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1709917200&t=5adcefd8f1721bb98959cc4ae2fac930",
          "https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics1.baidu.com%2Ffeed%2Ff636afc379310a553bce7d6c818be5a48026109f.jpeg%40f_auto%3Ftoken%3Da2f315f75d3f196a86f4b6648e2ae40c&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1709917200&t=5adcefd8f1721bb98959cc4ae2fac930",
          "https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics1.baidu.com%2Ffeed%2Ff636afc379310a553bce7d6c818be5a48026109f.jpeg%40f_auto%3Ftoken%3Da2f315f75d3f196a86f4b6648e2ae40c&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1709917200&t=5adcefd8f1721bb98959cc4ae2fac930"
        ]
      },
      {
        time: "2023-12-12",
        imgs: [
          "https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics1.baidu.com%2Ffeed%2Ff636afc379310a553bce7d6c818be5a48026109f.jpeg%40f_auto%3Ftoken%3Da2f315f75d3f196a86f4b6648e2ae40c&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1709917200&t=5adcefd8f1721bb98959cc4ae2fac930",
          "https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics1.baidu.com%2Ffeed%2Ff636afc379310a553bce7d6c818be5a48026109f.jpeg%40f_auto%3Ftoken%3Da2f315f75d3f196a86f4b6648e2ae40c&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1709917200&t=5adcefd8f1721bb98959cc4ae2fac930",
          "https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics1.baidu.com%2Ffeed%2Ff636afc379310a553bce7d6c818be5a48026109f.jpeg%40f_auto%3Ftoken%3Da2f315f75d3f196a86f4b6648e2ae40c&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1709917200&t=5adcefd8f1721bb98959cc4ae2fac930"
        ]
      },
      {
        time: "2023-12-12",
        imgs: [
          "https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics1.baidu.com%2Ffeed%2Ff636afc379310a553bce7d6c818be5a48026109f.jpeg%40f_auto%3Ftoken%3Da2f315f75d3f196a86f4b6648e2ae40c&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1709917200&t=5adcefd8f1721bb98959cc4ae2fac930",
          "https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics1.baidu.com%2Ffeed%2Ff636afc379310a553bce7d6c818be5a48026109f.jpeg%40f_auto%3Ftoken%3Da2f315f75d3f196a86f4b6648e2ae40c&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1709917200&t=5adcefd8f1721bb98959cc4ae2fac930"
        ]
      },
      {
        time: "2023-12-12",
        imgs: [
          "https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics1.baidu.com%2Ffeed%2Ff636afc379310a553bce7d6c818be5a48026109f.jpeg%40f_auto%3Ftoken%3Da2f315f75d3f196a86f4b6648e2ae40c&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1709917200&t=5adcefd8f1721bb98959cc4ae2fac930",
          "https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics1.baidu.com%2Ffeed%2Ff636afc379310a553bce7d6c818be5a48026109f.jpeg%40f_auto%3Ftoken%3Da2f315f75d3f196a86f4b6648e2ae40c&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1709917200&t=5adcefd8f1721bb98959cc4ae2fac930",
          "https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics1.baidu.com%2Ffeed%2Ff636afc379310a553bce7d6c818be5a48026109f.jpeg%40f_auto%3Ftoken%3Da2f315f75d3f196a86f4b6648e2ae40c&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1709917200&t=5adcefd8f1721bb98959cc4ae2fac930",
          "https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics1.baidu.com%2Ffeed%2Ff636afc379310a553bce7d6c818be5a48026109f.jpeg%40f_auto%3Ftoken%3Da2f315f75d3f196a86f4b6648e2ae40c&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1709917200&t=5adcefd8f1721bb98959cc4ae2fac930"
        ]
      }
    ];
  });
  console.log("row");
};

// 结算
const onSettlement = async () => {
  console.log("row");
};
// 取消

const onCancel = async () => {
  console.log("row");
};

defineExpose({
  TASK_STATUS
});
</script>
<style lang="less" scoped>
.voucher-item {
  margin-bottom: 20px;
  .date {
    font-size: #000000a6;
  }
  .el-col {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 200px;
    overflow: hidden;
  }
  img {
    width: 100%;
    object-fit: contain;
    font-size: 0;
    line-height: 0;
    margin-top: 12px;
  }
}
</style>
